<template>
  <!-- 字体组件，无需渲染任何内容 -->
</template>

<script>
export default {
  name: 'FontLoader'
}
</script>

<style lang="scss">
/* ========================================
   字体组件 - 全局字体样式定义
   ======================================== */

/* 1. 字体文件定义 */
@font-face {
  font-family: 'FangSong';
  src: url('~@/styles/仿宋_GB2312.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 2. CSS 变量定义 - 便于主题切换和统一管理 */
:root {
  /* 字体家族 */
  --font-family-fangsong: 'FangSong', '仿宋_GB2312', serif;
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-family-code: 'Consolas', 'Monaco', 'Courier New', monospace;
  
  /* 字体大小 - 语义化命名 */
  --font-size-content-primary: 19px;     /* 主要内容（正文、思考内容）*/
  --font-size-content-secondary: 16px;   /* 次要内容（思考标题）*/
  --font-size-message-base: 15px;        /* 消息基础字体 */
  --font-size-text-normal: 14px;         /* 普通文本 */
  --font-size-text-small: 13px;          /* 小文本 */
  --font-size-text-tiny: 12px;           /* 极小文本 */
  --font-size-text-mini: 11px;           /* 迷你文本 */
  
  /* 行高 */
  --line-height-content: 1.6;            /* 内容行高 */
  --line-height-relaxed: 1.8;            /* 放松的行高（代码块）*/
  --line-height-normal: 1.5;             /* 普通行高 */
  --line-height-tight: 1.4;              /* 紧凑行高 */
  
  /* 字重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 字体透明度 */
  --font-opacity-normal: 1;
  --font-opacity-muted: 0.85;
  --font-opacity-light: 0.7;
}

/* ========================================
   3. 基础工具类 - 单一职责
   ======================================== */

/* 字体家族 */
.font-fangsong {
  font-family: var(--font-family-fangsong);
}

.font-system {
  font-family: var(--font-family-system);
}

.font-code {
  font-family: var(--font-family-code);
}

/* 字体大小 */
.text-primary { font-size: var(--font-size-content-primary); }
.text-secondary { font-size: var(--font-size-content-secondary); }
.text-base { font-size: var(--font-size-message-base); }
.text-normal { font-size: var(--font-size-text-normal); }
.text-small { font-size: var(--font-size-text-small); }
.text-tiny { font-size: var(--font-size-text-tiny); }
.text-mini { font-size: var(--font-size-text-mini); }

/* 行高 */
.leading-content { line-height: var(--line-height-content); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-tight { line-height: var(--line-height-tight); }

/* 字重 */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* 透明度 */
.opacity-normal { opacity: var(--font-opacity-normal); }
.opacity-muted { opacity: var(--font-opacity-muted); }
.opacity-light { opacity: var(--font-opacity-light); }

/* ========================================
   4. 场景化组合类 - 业务场景复用
   ======================================== */

/* 主要内容样式（正文区域）*/
.font-content-primary {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-primary);
  line-height: var(--line-height-content);
  font-weight: var(--font-weight-normal);
  font-style: normal;
}

/* 次要内容样式（标题、摘要）*/
.font-content-secondary {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-secondary);
  line-height: var(--line-height-content);
  font-weight: var(--font-weight-semibold);
}

/* 思考过程内容样式 */
.font-think-content {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-primary);
  line-height: var(--line-height-content);
  font-style: normal;
  opacity: var(--font-opacity-muted);
}

/* 思考过程标题样式 */
.font-think-header {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-secondary);
  line-height: var(--line-height-content);
  font-weight: var(--font-weight-semibold);
}

/* 正文主体内容样式 */
.font-main-content {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-primary);
  line-height: var(--line-height-content);
  font-weight: var(--font-weight-normal);
}

/* 消息文本基础样式 */
.font-message-base {
  font-size: var(--font-size-message-base);
  line-height: var(--line-height-content);
}

/* 代码块样式 */
.font-code-block {
  font-family: var(--font-family-code);
  font-size: var(--font-size-text-normal);
  line-height: var(--line-height-relaxed);
}

/* 行内代码样式 */
.font-inline-code {
  font-family: var(--font-family-code);
  font-size: var(--font-size-text-small);
}

/* ========================================
   5. 全局深度样式 - 用于 ::v-deep 场景
   ======================================== */

/* 思考块样式（全局） */
.think-block-typography {
  .think-content {
    font-family: var(--font-family-fangsong);
    font-size: var(--font-size-content-primary);
    line-height: var(--line-height-content);
    font-style: normal;
    opacity: var(--font-opacity-muted);
  }
  
  .think-header {
    font-size: var(--font-size-content-secondary);
    font-weight: var(--font-weight-semibold);
  }
}

/* 主内容样式（全局） */
.main-content-typography {
  .main-content {
    font-family: var(--font-family-fangsong);
    font-size: var(--font-size-content-primary);
    line-height: var(--line-height-content);
    font-weight: var(--font-weight-normal);
  }
}

/* 代码样式（全局） */
.code-typography {
  .code-block {
    font-family: var(--font-family-code);
    font-size: var(--font-size-text-normal);
    line-height: var(--line-height-relaxed);
  }
  
  .inline-code {
    font-family: var(--font-family-code);
    font-size: var(--font-size-text-small);
  }
}

/* ========================================
   6. 辅助混合宏（Sass Mixin）- 供组件引入使用
   ======================================== */

/* 仿宋内容混合宏 */
@mixin fangsong-content-primary {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-primary);
  line-height: var(--line-height-content);
  font-weight: var(--font-weight-normal);
  font-style: normal;
}

@mixin fangsong-content-secondary {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-secondary);
  line-height: var(--line-height-content);
  font-weight: var(--font-weight-semibold);
}

/* 思考内容混合宏 */
@mixin think-content-style {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-primary);
  line-height: var(--line-height-content);
  font-style: normal;
  opacity: var(--font-opacity-muted);
}

/* 主内容混合宏 */
@mixin main-content-style {
  font-family: var(--font-family-fangsong);
  font-size: var(--font-size-content-primary);
  line-height: var(--line-height-content);
  font-weight: var(--font-weight-normal);
}

/* 代码块混合宏 */
@mixin code-block-style {
  font-family: var(--font-family-code);
  font-size: var(--font-size-text-normal);
  line-height: var(--line-height-relaxed);
}

@mixin inline-code-style {
  font-family: var(--font-family-code);
  font-size: var(--font-size-text-small);
}

/* ========================================
   使用说明：
   
   方式1 - 使用 CSS 变量（推荐，最灵活）：
   .my-element {
     font-family: var(--font-family-fangsong);
     font-size: var(--font-size-content-primary);
   }
   
   方式2 - 使用工具类（快速，适合简单场景）：
   <div class="font-fangsong text-primary leading-content">
   
   方式3 - 使用场景化类（推荐，语义清晰）：
   <div class="font-content-primary">
   
   方式4 - 使用混合宏（适合 Sass/SCSS）：
   .my-element {
     @include fangsong-content-primary;
   }
   ======================================== */
</style>

